Skip to main content

useViews

The useViews hook provides access to the state and functionality of the Viewports in the current Viewer. It is part of the @promaton/scan-viewer package and offers a set of methods and properties to manage and interact with the Viewer.

Interface: ViewState​

The useViews hook exposes the following properties and methods:

Properties​

eventDispatcher​

  • Type: GenericEventDispatcher<ViewerEventMap>
  • A global event dispatcher for the Viewer.

hideOutlines​

  • Type: boolean
  • Indicates whether cross-section outlines are hidden in "2D" views.

viewerHeight​

  • Type: number
  • The height of the viewer canvas in pixels.

viewerWidth​

  • Type: number
  • The width of the viewer canvas in pixels.

views​

  • Type: object
  • Contains all views currently registered by their IDs.
  • Index Signature: [key: string]: undefined | ViewController

Methods​

deleteView(viewID: string): void​

Deletes the specified view by its ID.

  • Parameters:
    • viewID (string): The ID of the view to delete.
  • Returns: void

setHideOutlines(hideOutlines: boolean): void​

Sets whether to hide cross-section outlines in "2D" views.

  • Parameters:
    • hideOutlines (boolean): Whether to hide the outlines.
  • Returns: void

setViewerSize(width: number, height: number): void​

Sets the size of the viewer canvas.

  • Parameters:
    • width (number): The width of the viewer canvas.
    • height (number): The height of the viewer canvas.
  • Returns: void

updateView(viewID: string, controller: Partial<ViewController>, force?: boolean): void​

Updates the specified view with new parameters or creates a new one if it doesn't exist.

  • Parameters:
    • viewID (string): The ID of the view to update.
    • controller (Partial<ViewController>): The new parameters for the view.
    • force (boolean, optional): Whether to force the update.
  • Returns: void

Example Usage​

import { useViews } from "@promaton/scan-viewer";

const ViewerComponent = () => {
  const {
    deleteView,
    setHideOutlines,
    setViewerSize,
    updateView,
    viewerHeight,
    viewerWidth,
    views,
  } = useViews();

  // Example: Set viewer size
  setViewerSize(800, 600);

  // Example: Update a view
  updateView("view1", { zoom: 2 });

  // Example: Hide outlines
  setHideOutlines(true);

  return (
    <div>
      Viewer Height: {viewerHeight}, Viewer Width: {viewerWidth}
    </div>
  );
};

The useViews hook simplifies managing and interacting with Viewer state, making it a powerful tool for developers working with the @promaton/scan-viewer package.